<#import "/admin/_layout.html" as layout>
<@layout.header "角色授权"></@layout.header>
<@layout.body>
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-left">
                        <li class="breadcrumb-item"><a href="#">角色</a></li>
                        <li class="breadcrumb-item active">授权</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <section class="content">
        <div class="container-fluid">
            <div class="card card-default">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="callout callout-info">
                                <h5><i class="fas fa-info"></i> 你正在给${role.roleName!}授权</h5>
                                请勾选右侧权限树复选框授权
                            </div>
                        </div>
                        <div class="col-md-9">
                            <ul id="permissionTree" class="ztree"></ul>
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    <button type="button" id="savePermission" class="btn btn-primary">提交</button>
                </div>
            </div>
        </div>
    </section>
</@layout.body>
<@layout.script>
    <script type="text/javascript">

        $.ajax({
            url: "/admin/role/getPermissionList",
            data: {roleId: ${role.id!}},
            type: "GET",
            dataType: "json",
            success: function(data) {
                console.log(data)

                var zTreeObj;
                // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
                var setting = {
                    view: {showIcon: false},
                    check: {
                        enable: true,
                        chkStyle: "checkbox",
                        chkboxType: { "Y": "p", "N": "s" }
                    }
                };
                // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
                var zNodes = data;
                $(document).ready(function(){
                    zTreeObj = $.fn.zTree.init($("#permissionTree"), setting, zNodes);
                });
            }
        });

        function findChecked() {
            var treeObj = $.fn.zTree.getZTreeObj("permissionTree");
            var ids=[];
            var nodes = treeObj.getCheckedNodes(true);
            for(var i=0;i<nodes.length;i++) {
                ids.push(nodes[i].id);
            }
            return ids;
        }

        $(document).ready(function () {
            $("#savePermission").click(function () {
                var permissionIds = findChecked();
                var roleId = ${role.id!};

                if(permissionIds.length <= 0){
                    alertWarn("请选中权限项");
                    return;
                }

                ajaxPost("/admin/role/doSavePermission", {roleId: roleId, permissionIdList: permissionIds},
                    function() {
                        alertSuccess("提交成功", function () {
                            location.href = "/admin/role/list";
                        });
                    }
                );

            })
        })
    </script>
</@layout.script>